<template>
  <div>
    <div class="rowone">
      <el-row type="flex" class="row-bg" :gutter="24">
        <el-col :span="5">
          <el-input
            placeholder="搜索借款方"
            suffix-icon="el-icon-search"
            v-model="requirement.userName"
            class="inputLeft"
          >
          </el-input>
        </el-col>
        <el-col :span="5">
          <el-input
            placeholder="搜索借款人手机号"
            suffix-icon="el-icon-search"
            v-model="requirement.userPhone"
            class="inputLeft"
          >
          </el-input>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" icon="el-icon-search" @click="onClickSearch"
            >搜索</el-button
          >
        </el-col>
      </el-row>
    </div>
    <TableComponent
      :cols="cols"
      :table-data="tableData"
      :total="total"
      @requestData="requestData"
    >
      <template slot="operating" slot-scope="scope">
        <el-button size="medium" @click="onClickOffShelf(scope)">下架</el-button>
      </template>
    </TableComponent>
  </div>
</template>

<script>
import TableComponent from "../../components/basic/TableComponent"
import {getRecruitingLoan, offShelfLoan} from "../../http/loan";

export default {
  name: "Loan",
  components: {
    TableComponent
  },
  data() {
    return {
      cols: {
        id: "借款编号",
        userName: "借款方",
        userPhone: "借款人手机",
        name: "标名",
        total: "借款金额",
        apr: "年化利率(%)",
        repayment: "还款方式",
        loanPeriod: "期限(天)",
        gmtCreated: {
          addr: ["borrowSubjectInfo"],
          title: "上架时间"
        },
        saleTime: {
          addr: ["borrowSubjectInfo"],
          title: "开售时间"
        },
        raisedAmount: {
          addr: ["borrowSubjectInfo"],
          title: "已投金额"
        },
        investmentProgress: "投资进度",
        status: "状态"
      },
      requirement: {
        name: "", //新标名称
        userName: "", //借款方名称
        userPhone: "", //借款方手机
        status: "全部状态", //新标状态
        loanType: "", //借款类型
      },
      total: 0,
      tableData: [],
      page: 1,
      limit: 5,
    }
  },
  methods: {
    requestData(page, limit,requirement) {
      this.page = page;
      this.limit = limit;
      getRecruitingLoan(page, limit,requirement).then(res => {
        if(res.data.code == 20000) {
          this.total = res.data.data.total;
          this.tableData = res.data.data.rows;
        } else {
          this.$message.error(res.data.message);
        }
      }).catch(err => {
        console.err(err)
        this.$message.error("数据加载失败！详情见日志");
      });
    },
    onClickOffShelf(scope) {
      offShelfLoan(scope.data.data.id).then(res => {
        if(res.data.code == 20000) {
          this.$message.success("下架成功");
        } else {
          this.$message.error(res.data.message);
          return Promise.reject(res.data.message);
        }
      }).then(() => {
        let now = Math.ceil((this.total - 1) / this.limit);
        let rpage = this.page > now ? this.page - 1 : this.page;
        rpage = rpage < 1 ? 1 : rpage;
        this.requestData(rpage,this.limit,this.requirement)
      }).catch(err => {
        console.err(err)
        this.$message.error("下架失败！详情见日志");
      })
    },
    onClickSearch() {
      this.requestData(1, 5, this.requirement);
    }
  },
  beforeMount() {
    this.requestData(1, 5);
  }
}
</script>

<style scoped>
.row-bg {
  padding: 20px 14px;
}
</style>